<template>
    <el-form label-width="110px" class="form-row" size="small">
        <el-row>
            <el-col :span="12">
                <el-form-item label="产品代码:">
                    <RiskEntryInput id="fundCode" @set-entry-data="getFundCode" :returnDatas="orderForm.fundCode" />
                </el-form-item>
                <div class="icon-form-item">
                    <el-form-item label="金融产品代码:">
                        <el-select
                            v-model="orderForm.stockCode"
                            @change="handleFormChange($event, 'stockCode')"
                            filterable
                            remote
                            :remote-method="getStockCodeList"
                            :loading="selectLoading"
                            size="mini"
                            clearable
                            @clear="handleClearStock"
                        >
                            <el-option
                                v-for="(i, index) in stockStorage"
                                :key="i.stockCode + index"
                                :label="i.stockCode + ' ' + i.stockNameSt"
                                :value="i.stockCode"
                                @click.native="handleLabelClick(i.stockNameSt)"
                                :name="'stockCode' + i.stockCode"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-col>
            <el-col :span="12">
                <el-form-item label="指令金额:">
                    <RiskInputNumber
                        :input="orderForm.orderBalance"
                        :inputAfter="'万元'"
                        :precision="4"
                        :maxlength="14"
                        :field="'orderBalance'"
                        @getInputNumber="getInputNumber(arguments)"
                    >
                    </RiskInputNumber>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row class="info" v-if="nonStandardInfo.publisherScale">
            <el-col :span="12">
                <span class="tit">配置资产规模(亿元): </span>
                <span>{{ numberFormat(nonStandardInfo.publisherScale, '亿元') || '--' }} </span>
            </el-col>
            <el-col :span="12">
                <span class="tit">受托人: </span>
                <span>
                    {{ nonStandardInfo.depositaryName && nonStandardInfo.depositaryName.length ? nonStandardInfo.depositaryName.join(',') : '--' }}
                </span>
            </el-col>
            <el-col :span="12">
                <span class="tit">发行人: </span>
                <span>{{ nonStandardInfo.issueName || '--' }} </span>
            </el-col>
            <el-col :span="12">
                <span class="tit">融资主体:</span>
                <span>{{ nonStandardInfo.capitalName || '--' }} </span>
            </el-col>
            <el-col :span="12">
                <span class="tit">担保人:</span>
                <span>{{ nonStandardInfo.guarantorName || '--' }} </span>
            </el-col>
        </el-row>
    </el-form>
</template>
<script lang="ts">
import RiskEntryInput from '@/common/components/risk-entry-input.vue';
import RiskInputNumber from '@/pages/risk-measure/components/risk-input-number.vue';
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { SGU_CACHE } from '@/utils/diction-const-util';
import { numberFormat } from '@/utils/tools';

/**
 * 非标试算
 */
@Component({ name: 'OffForm', components: { RiskInputNumber, RiskEntryInput } })
export default class OffForm extends Vue {
    @Prop() detail: any; // 指令表单回显数据
    @Prop() stockInfoCache: any;

    numberFormat = numberFormat;

    orderForm: any = {
        fundCode: '', // 产品代码
        stockCode: '', // 证券代码
        stockNameSt: '', // 证券名称
        orderBalance: '', // 指令金额
        fundNameSt: '', // 产品简称
    };
    fundStorage: any[] = []; // 产品数据
    stockStorage: any[] = []; // 证券代码下拉数据
    selectLoading: boolean = false;
    stockInfo: any = {};
    nonStandardInfo: any = {};

    async mounted() {
        // 获取证券下拉代码
        this.getStockCodeList('');
        // 获取产品信息 (产品序号下拉框数据)
        this.fundStorage = await SGU_CACHE('FundInfoByUser', '/fundInfo/list/byUser/like?fundCodeOrName=', '');
    }

    @Watch('renderCount', { immediate: true, deep: true })
    // 指令表单回显
    async setForm() {
        let instruction = this.detail;
        for (const key in instruction) {
            this.orderForm[key] = instruction[key];
            if (key == 'orderBalance' && instruction[key]) {
                // 金额单位为万元
                this.orderForm.orderBalance = instruction.orderBalance / 10000;
                this.$emit('getOrderForm', this.orderForm, 20);
            }
        }
        await this.getStockCodeList(instruction?.stockCode);
        this.handleStockCodeChange(instruction?.stockCode);
        this.getNonStandardInfo();
    }

    /**
     * 查询证券代码下拉
     */
    async getStockCodeList(val: string) {
        this.selectLoading = true;
        await this.$axios.post('/dict/stock/report/select/20', { dictKey: val, dictKeyName: val }).then((res: any) => {
            this.stockStorage = res;
            this.selectLoading = false;
        });
    }

    /**
     * 表单字段变化事件
     * @param value 字段值
     * @param field 字段名
     */
    async handleFormChange(value: string, field: string) {
        if (field === 'stockCode') {
            this.handleStockCodeChange(value);
            this.getNonStandardInfo();
        } else if (field === 'fundCode') {
            this.handleFundCodeChange(value);
            this.getNonStandardInfo();
        }

        this.$emit('getOrderForm', this.orderForm, 20);
    }

    /**
     * 产品代码变化事件
     * @param fundCode 当前选中的产品代码
     */
    handleFundCodeChange(fundCode: string) {
        let fund = this.fundStorage.find(item => item.fundCode === fundCode) || {};
        this.orderForm.fundNameSt = fund?.fundNameSt;
    }

    /**
     * 证券代码下拉选项点击事件
     */
    handleLabelClick(label: string) {
        this.orderForm.stockNameSt = label;
    }

    /**
     * 证券代码变化事件
     * @param stockCode 当前选中的证券代码
     */
    handleStockCodeChange(stockCode: string) {
        if (stockCode) {
            this.stockInfo = this.stockStorage.find(item => item.stockCode === stockCode);
            this.$emit('getStockInfo', this.stockInfo, '20');
        }
    }

    /**
     * 获取非标证券信息
     */
    getNonStandardInfo(): void {
        this.$axios({ method: 'post', url: '/htscamc/nonStandardInfo/info', data: this.orderForm }).then((res: any) => {
            // res = {
            //     depositaryName: '泰康养老受托组合',
            //     capitalName: '招商银行深圳上梅林分行',
            //     guarantorName: '深圳赢和信息科技有限公司',
            //     publisherScale: '8.9',
            //     issueName: '甘肃金控企业年金',
            // };
            this.nonStandardInfo = res;
        });
    }

    handleClearStock(): void {
        this.getStockCodeList('');
        this.stockInfo = {};
        this.$emit('getStockInfo', this.stockInfo, '20');
    }

    // 产品下拉组件--子组件事件传
    getFundCode(val: any) {
        if (this.orderForm.fundCode == val) {
            return;
        }
        this.orderForm.fundCode = val;
        this.handleFormChange(val, 'fundCode');
    }

    // 数字输入框组件--子组件事件传递
    getInputNumber(args: any) {
        let value = args[0];
        let field = args[1];
        // this.orderForm[field] = accMul(value, 10000);
        this.orderForm[field] = value;
        this.handleFormChange(value, field);
    }

    /**
     * 计算指令数量或金额
     */
    handleCalcAmountOrBalance() {}
}
</script>
<style lang="scss" scoped>
@import '@/pages/risk-time/styles/order-form';

.info {
    border-top: 1px solid #999;
    margin-top: 15px;
    padding: 15px 0;
    color: #575757;

    .el-col {
        padding: 0 30px;
        margin-bottom: 10px;

        .tit {
            margin-right: 5px;
        }
    }
}
</style>
